<template>
  <div class="foot">
    <div class="foot_two">
      <div class="flex justify-space-between mb-4 flex-wrap gap-4">
        <el-button
          v-for="button in buttons"
          :key="button.name"
          :type="button.type"
          text
          @click="new ToUrl(button.url)"
        >{{ button.name }}
        </el-button>
      </div>
    </div>
    <div class="foot_one">
      <div>
        <h4>联系我们</h4>
        <p>
          项目：科研项目管理系统&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          QQ群：716433257
        </p>
      </div>
      <div>
        <img alt="" src="@/assets/images/WeChat.png"/>
        <img alt="" src="@/assets/images/QQ.png"/>
      </div>
    </div>
    <div>
      <p class="foot_three">
        Copyright © {{ year }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Foot",
  data() {
    return {
      buttons: [
        {type: "", name: "Gitee", url: "https://gitee.com/cai-bin00_admin/srppms"},
        {type: "", name: "GitHub", url: "https://github.com/cai1129/srppms"},
        {
          type: "",
          name: "博客",
          url: "https://blog.csdn.net/qq_47575615/article/details/129789937?spm=1001.2014.3001.5501"
        },
        {type: "", name: "技术交流", url: "https://tinyurl.com/283fb5fy"},
      ],
      year: "",
    };
  },
  methods: {
    ToUrl(url) {
      window.open(url)
    },
    nowTime() {
      let nowDate = new Date();
      let date = {
        year: nowDate.getFullYear(),
      };
      this.year = date.year
    },
  },
  mounted() {
    this.nowTime()
  }
};
</script>

<style>
.foot {
  width: 100%;
  height: 280px;
  margin-top: 2px;
  background-image: linear-gradient(
    to right,
    #04af9212,
    #fb9b0c1b,
    #7603cd1d,
    #f83c5824,
    #478ee023
  );
  border-top: solid #ffd436 2px;
}

.foot_one {
  width: 98%;
  margin-top: 10px;
  margin-left: 1%;
  padding-top: 10px;
  border-top: 2px solid white;
  border-bottom: 2px dashed white;
  color: rgb(78, 76, 76);
  display: flex;
  flex-direction: row;
  line-height: 40px;
}

.foot_one p {
  margin-left: 10px;
}

.foot_one img {
  width: 100px;
  height: 100px;
  margin-left: 400px;
}

.foot_two {
  width: 98%;
  margin-top: 10px;
  line-height: 40px;
  margin-left: 1%;
}

.foot_three {
  text-align: center;
  margin-top: 20px;
  color: rgb(78, 76, 76);
}
</style>
